
<template>
  <div class="leaderboard">
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 10 }"
      rowKey="id"
      bordered
    />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Table } from 'ant-design-vue'

export default defineComponent({
  name: 'Leaderboard',
  components: {
    'a-table': Table
  },
  props: {
    leaderboardData: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        sorter: (a, b) => a.name.localeCompare(b.name),
        sortDirections: ['descend', 'ascend']
      },
      {
        title: '答题次数',
        dataIndex: 'attempts',
        key: 'attempts',
        sorter: (a, b) => a.attempts - b.attempts,
        sortDirections: ['descend', 'ascend']
      },
      {
        title: '正确率',
        dataIndex: 'accuracy',
        key: 'accuracy',
        sorter: (a, b) => a.accuracy - b.accuracy,
        sortDirections: ['descend', 'ascend'],
        render: (text) => `${text}%`
      },
      {
        title: '积分',
        dataIndex: 'points',
        key: 'points',
        sorter: (a, b) => a.points - b.points,
        sortDirections: ['descend', 'ascend']
      }
    ]

    const data = ref([
      {
        id: 1,
        name: '张三',
        attempts: 50,
        accuracy: 80,
        points: 2000
      },
      {
        id: 2,
        name: '李四',
        attempts: 40,
        accuracy: 75,
        points: 1800
      },
      {
        id: 3,
        name: '王五',
        attempts: 60,
        accuracy: 90,
        points: 2500
      },
      {
        id: 4,
        name: '赵六',
        attempts: 30,
        accuracy: 70,
        points: 1500
      },
      {
        id: 5,
        name: '孙七',
        attempts: 55,
        accuracy: 85,
        points: 2200
      }
    ])

    const finalData = ref(props.leaderboardData.length ? props.leaderboardData : data.value)

    return {
      columns,
      data: finalData
    }
  }
})
</script>

<style scoped lang="less">
.leaderboard {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  overflow: auto;

  .ant-table {
    background: transparent;
  }

  .ant-table-thead > tr > th {
    background: rgba(255, 255, 255, 0.5);
    color: #333;
    font-weight: bold;
  }

  .ant-table-tbody > tr > td {
    color: #555;
  }

  .ant-table-pagination {
    text-align: right;
  }
}
</style>
